<template>
  <div>
    <a-card title="商品管理" style="width: 100%; hieght: 100%">
      <div slot="extra" class="add-box">
        <a-button
          type="primary"
          @click="add"
          :disabled="userState <= 2 ? false : true"
        >
          新增</a-button
        >
        <a-input-search
          placeholder="输入关键词"
          enter-button
          @search="onSearch"
          class="search"
        />
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="(record) => record.id"
        :pagination="pagination"
        @change="change"
      >
        <div slot="intro" slot-scope="row" class="intro-box">
          <p class="intro-text" :title="row.goodIntro">
            {{ row.goodIntro }}
          </p>
        </div>
        <div slot="img" slot-scope="row" >
          <img :src="row.goodImg" alt="" class="good-img" />
        </div>
        <div slot="btn" slot-scope="row" class="btn-box">
          <a-button
            type="primary"
            @click="edit(row)"
            :disabled="userState <= 2 ? false : true"
          >
            修改
          </a-button>
          <a-button
            type="danger"
            @click="del(row.id)"
            :disabled="userState <= 2 ? false : true"
          >
            下架
          </a-button>
          <a-button
            type="dashed"
            @click="fill(row.id)"
            :disabled="userState <= 2 ? false : true"
          >
            补货
          </a-button>
        </div>
      </a-table>
    </a-card>
    <a-modal
      v-model="addVisible"
      title="上架商品"
      ok-text="确认"
      cancel-text="取消"
      @ok="addhideModal"
    >
      <a-form-model
        ref="ruleFormRef"
        v-model="addVisible"
        :model="ruleForm"
        v-bind="layout"
      >
        <a-form-model-item has-feedback label="商品图片" prop="pass">
          <a-upload
            name="file"
            :multiple="true"
            action="http://192.168.137.132:8888/addImg"
            @change="handleChange"
          >
            <a-button> 上传图片 </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item has-feedback label="商品名" prop="pass">
          <a-input v-model="ruleForm.goodName" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="价格" prop="checkPass">
          <a-input v-model="ruleForm.goodPrice" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="库存" prop="age">
          <a-input v-model="ruleForm.goodNum" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="介绍" prop="age">
          <a-input v-model="ruleForm.goodIntro" />
        </a-form-model-item>
        <a-form-model-item label="商品类型">
          <a-select v-model="ruleForm.goodType" placeholder="请选择商品类型">
            <a-select-option value="手机数码">手机数码</a-select-option>
            <a-select-option value="男女时尚">男女时尚</a-select-option>
            <a-select-option value="电脑办公">电脑办公</a-select-option>
            <a-select-option value="食品生鲜">食品生鲜</a-select-option>
            <a-select-option value="美妆护肤">美妆护肤</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="visible"
      title="修改商品"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
      <a-form-model
        ref="ruleFormRef"
        v-model="visible"
        :model="editForm"
        v-bind="layout"
      >
        <a-form-model-item has-feedback label="商品名" prop="pass">
          <a-input v-model="editForm.goodName" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="价格" prop="checkPass">
          <a-input v-model="editForm.goodPrice" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="库存" prop="age">
          <a-input v-model="editForm.goodNum" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="介绍" prop="age">
          <a-input v-model="editForm.goodIntro" />
        </a-form-model-item>
        <a-form-model-item label="商品类型">
          <a-select v-model="editForm.goodType" placeholder="请选择商品类型">
            <a-select-option value="手机数码">手机数码</a-select-option>
            <a-select-option value="男女时尚">男女时尚</a-select-option>
            <a-select-option value="电脑办公">电脑办公</a-select-option>
            <a-select-option value="食品生鲜">食品生鲜</a-select-option>
            <a-select-option value="美妆护肤">美妆护肤</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="补货"
      :visible="fillModal"
      @ok="fillhandleOk"
      @cancel="
        () => {
          this.fillModal = false;
        }
      "
    >
      <a-input
        v-model="fillNum"
        autocomplete="off"
        placeholder="数量"
        type="number"
      />
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "id",
    title: "编号",
  },
  {
    title: "商品图片",
    scopedSlots: { customRender: "img" },
  },
  {
    dataIndex: "goodName",
    title: "商品名",
  },

  {
    dataIndex: "goodPrice",
    title: "价格",
  },
  {
    dataIndex: "goodNum",
    title: "库存",
  },
  {
    // dataIndex: "goodIntro",
    title: "介绍",
    scopedSlots: { customRender: "intro" },
  },
  {
    title: "操作",
    scopedSlots: { customRender: "btn" },
  },
];
import {
  getAllGood,
  addGood,
  editGood,
  delGood,
  AddImageMessage,
  FillGoods,
} from "../../network/goods";
export default {
  data() {
    return {
      fillModal: false,
      imgMessage: {
        id: "",
        imgSrc: "",
      },
      data: [],
      loading: false,
      visible: false,
      addVisible: false,
      imgId: null,
      userState: null,
      columns,
      current: 1,
      imgSrc: "",
      keyWord: "",
      ruleForm: {
        goodName: "",
        goodPrice: "",
        goodNum: "",
        goodIntro: "",
        goodType: "",
        goodImg: "",
        roleState: this.$store.state.state,
      },
      editForm: {
        id: "",
        goodName: "",
        goodPrice: "",
        goodNum: "",
        goodIntro: "",
        goodType: "",
        roleState: this.$store.state.state,
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0,
      },
      fillNum: null,
      fillId: "",
    };
  },
  created() {
    this.getDate();
    this.userState = this.$store.state.state;
  },
  methods: {
    fill(id) {
      console.log(id);
      this.fillModal = true;
      this.fillId = id;
    },
    getDate(keyWord) {
      getAllGood({
        goodName: this.keyWord,
        roleState: this.$store.state.state,
      }).then((res) => {
        // this.pagination.total = Number(res.data.totalSize);
        this.data = res.data.data;
        // console.log(this.data);
      });
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    add() {
      this.addVisible = true;
    },
    edit(data) {
      console.log(data);
      this.editForm.goodName = data.goodName;
      this.editForm.goodPrice = data.goodPrice;
      this.editForm.goodNum = data.goodNum;
      this.editForm.goodIntro = data.goodIntro;
      this.editForm.id = data.id;
      this.editForm.goodType = data.goodType;
      // console.log(this.editFrom);
      this.visible = true;
    },
    addhideModal() {
      addGood(this.ruleForm).then((res) => {
        this.getDate();
        this.addVisible = false;
      });
    },
    hideModal() {
      editGood(this.editForm).then((res) => {
        this.getDate();
      });
      this.visible = false;
    },
    del(id) {
      delGood({ id: id, roleState: this.$store.state.state }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("下架成功！");
          this.getDate();
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    change(e) {
      console.log(e);
      this.pagination.current = e.current;
    },
    uploadImg(row) {
      this.imgMessage.id = row.id;
      console.log(row);
    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file);
        this.ruleForm.goodImg = info.file.response.Url;
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} 图片上传成功！`);
        this.getDate();
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 图片上传失败！`);
      }
    },
    fillhandleOk() {
      // console.log(this.fillId, this.fillNum);
      FillGoods({
        id: this.fillId,
        roleState: this.$store.state.state,
        goodNum: this.fillNum,
      }).then((res) => {
        console.log(res);
        this.getDate();
        this.fillModal = false;
      });
    },
    onSearch(e) {
      this.keyWord = e;
      // console.log(e);
      this.getDate();
    },
  },
};
</script>

<style scoped>
.addInput {
  width: 100%;
  display: flex;
}
.good-img {
  height: 50px;
}
.intro-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.intro-box {
  width: 20vw;
}
.btn-box {
  width: 200px;
}
</style>